import React, { useState } from "react";
import { useAES } from "./hooks/useAES";

function App() {
  const { encrypt, decrypt, error } = useAES();

  const [plain, setPlain] = useState("");
  const [cipher, setCipher] = useState("");
  const [decrypted, setDecrypted] = useState("");

  const handleEncrypt = () => setCipher(encrypt(plain));
  const handleDecrypt = () => setDecrypted(decrypt(cipher));

  return (
    <div style={{ padding: 40, maxWidth: 600, margin: "0 auto" }}>
      <h1>React AES Hook 示例</h1>

      <h3>明文</h3>
      <textarea
        rows={4}
        style={{ width: "100%" }}
        value={plain}
        onChange={(e) => setPlain(e.target.value)}
        placeholder="输入要加密的内容"
      />

      <button onClick={handleEncrypt}>🔒 加密</button>

      <h3>密文（salt|iv|ciphertext）</h3>
      <textarea
        rows={4}
        style={{ width: "100%" }}
        value={cipher}
        onChange={(e) => setCipher(e.target.value)}
        placeholder="粘贴密文后解密"
      />

      <button onClick={handleDecrypt}>🔓 解密</button>

      {decrypted && (
        <>
          <h3>解密结果</h3>
          <pre>{decrypted}</pre>
        </>
      )}

      {error && <p style={{ color: "red" }}>{error}</p>}
    </div>
  );
}

export default App;
